<template>
    <div class="demo">
        <h2>📌 简单用法</h2>
        <p>
            <strong>预览</strong>
        </p>
        <div class="component-wrapper">
            <div class="component-wrapper-demo">
                <el-menu
                        :default-active="''"
                        class="el-menu-vertical-demo menu"
                        :collapse="false"
                        unique-opened
                        @select="menuSelect"
                >
                    <syxMenuSun :data="datas"></syxMenuSun>
                </el-menu>
            </div>
            <div class="code-content" v-highlight style="height: 0;">
                <div class="code-content-height">
                    <pre><code class="html">{{codeStr}}</code></pre>
                </div>
            </div>
            <div class="lock-code" @click="showCode(0)" ref="xxx">
                <span class="lock-code-word">{{isShow[0] === false ? '显示代码' : '隐藏代码'}}</span>
            </div>
        </div>
    </div>
</template>

<script>
    import mixin from '../mixin'
    export default {
        mixins: [mixin],
        data() {
            return {
                datas:[
                    {
                        icon: 'el-icon-s-home',
                        path: '/',
                        title: '首页',
                        children: []
                    },
                    {
                        icon: 'el-icon-setting',
                        path: '/system',
                        title: '系统设置',
                        children: [
                            {
                                icon: 'el-icon-s-operation',
                                path: '/menu',
                                title: '菜单维护',
                                children: []
                            },
                            {
                                icon: 'el-icon-s-custom',
                                path: '/role',
                                title: '角色维护',
                                children: []
                            },
                            {
                                icon: 'el-icon-s-promotion',
                                path: '/organization',
                                title: '组织维护',
                                children: []
                            },
                            {
                                icon: 'el-icon-s-check',
                                path: '/PostMaintenance',
                                title: '岗位维护',
                                children: []
                            },
                            {
                                icon: 'el-icon-user-solid',
                                path: '/user',
                                title: '用户维护',
                                children: []
                            },
                            {
                                icon: 'el-icon-s-management',
                                path: '/dictionary',
                                title: '字典维护',
                                children: []
                            },
                            {
                                icon: 'el-icon-loading',
                                path: '/logonLogs',
                                title: '登录日志',
                                children: []
                            }
                        ]
                    }
                ],
                codeStr: `
<el-menu
                        :default-active="''"
                        class="el-menu-vertical-demo menu"
                        :collapse="false"
                        unique-opened
                        @select="menuSelect"
                >
                    <syxMenuSun :data="datas"></syxMenuSun>
                </el-menu>
            menuSelect(item){
                console.log(item)
            }
datas:[
    {
      icon: 'el-icon-s-home',
      path: '/',
      title: '首页',
      children: []
    },
    {
      icon: 'el-icon-setting',
      path: '/system',
      title: '系统设置',
      children: [
        {
          icon: 'el-icon-s-operation',
          path: '/menu',
          title: '菜单维护',
          children: []
        },
        {
          icon: 'el-icon-s-custom',
          path: '/role',
          title: '角色维护',
          children: []
        },
        {
          icon: 'el-icon-s-promotion',
          path: '/organization',
          title: '组织维护',
          children: []
        },
        {
          icon: 'el-icon-s-check',
          path: '/PostMaintenance',
          title: '岗位维护',
          children: []
        },
        {
          icon: 'el-icon-user-solid',
          path: '/user',
          title: '用户维护',
          children: []
        },
        {
          icon: 'el-icon-s-management',
          path: '/dictionary',
          title: '字典维护',
          children: []
        },
        {
          icon: 'el-icon-loading',
          path: '/logonLogs',
          title: '登录日志',
          children: []
        }
      ]
    }
  ]


源代码:
<div>
    <template v-for="(item, index) in data">
      <el-submenu
        :key="index"
        :index="item.path"
        v-if="item.children.length > 0"
      >
        <template slot="title">
          <i v-if="icon && item.icon" :class="item.icon" style="font-size: 24px"></i>
          <img v-if="imgIcon && item.imgIcon" width="40px" :src="'@/assets/imgIcon'+item.imgIcon+'.png'" alt="">
          <span class="span">{{ item.title }}</span>
        </template>
        <MenuSun :data="item.children"></MenuSun>
      </el-submenu>
      <el-menu-item :key="index" v-else :index="item.path">
        <i v-if="icon && item.icon" :class="item.icon" style="font-size: 24px"></i>
        <img v-if="imgIcon && item.imgIcon" width="40px" :src="'@/assets/imgIcon'+item.imgIcon+'.png'" alt="">
        <span class="span" slot="title">{{ item.title }}</span>
      </el-menu-item>
    </template>
  </div>
  props: {
    /**
     * tree 数据
     */
    data: {
      type: Array,
      default: () => ([])
    },
    /**
     * icon 显示
     */
    icon: {
      type: Boolean,
      default: () => (true)
    },
    /**
     * imgIcon 显示
     */
    imgIcon: {
      type: Boolean,
      default: () => (false)
    },
    /**
     * 箭头显示,缩小必传
     */
    isCollapse: {
      type: Boolean,
      required: false
    }
  }
  <style scoped>
  .span{
    margin-left: 20px;
  }
</style>
        `
            }
        },
        methods:{
            menuSelect(item){
                console.log(item)
            }
        }
    }
</script>

<style lang="scss" scoped>

</style>
